<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>同咨科技-商户后台</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <link href="../../lib/layui/css/layui.css" rel="stylesheet">

    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="module" src="../components/use-body.js"></script>



    <link href="../../static/css/task.css" rel="stylesheet">
    <link href="../../static/css/uselay.css" rel="stylesheet">
</head>

<body>
    <use-body>
        <div class="page-body taskIndex">

            <!-- 左边菜单 -->
            <div class="side">
                <span class="layui-breadcrumb breadcrumb" lay-separator="/">
                    <a><i title="首页" class="iconfont use-more"></i></a>
                    <a><cite>任务大厅</cite></a>
                </span>

                <div class="layui-panel">
                    <ul class="layui-menu" id="demo-menu">
                        <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
                            <div class="layui-menu-body-title">我的任务</div>
                            <ul>
                                <li class="layui-menu-item-checked">
                                    <div class="layui-menu-body-title">全部任务</div>
                                </li>
                            </ul>
                        </li>
                        <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
                            <div class="layui-menu-body-title">公司任务</div>
                            <ul>
                                <li>
                                    <div class="layui-menu-body-title">全部任务</div>
                                </li>
                            </ul>
                        </li>
                        <li class="layui-menu-item-divider"></li>
                        <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
                            <div class="layui-menu-body-title">项目任务</div>
                            <ul>
                                <li>
                                    <div class="layui-menu-body-title">项目小组A</div>
                                </li>
                                <li>
                                    <div class="layui-menu-body-title">项目小组B</div>
                                </li>
                                <li>
                                    <div class="layui-menu-body-title">项目小组C</div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 主体 -->
            <div class="page-border">

                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">全部任务</li>
                        <li>我创建的</li>
                        <li>我督办的</li>
                        <li>我执行的</li>
                        
                    </ul>
                    <!-- tab上的按钮 -->
                    <div class="public-btn">
                        <button class="layui-btn layui-btn-radius">查看任务评分</button>
                        <button class="layui-btn layui-btn-radius"><i class="layui-icon layui-icon-addition"></i>创建任务</button>
                    </div>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">

                            <!-- 工具栏 -->
                            <form class="layui-form layui-row">
                                <div class="table-toolbar">
                                    <div class="left">
                                        <div class="layui-input-wrap">
                                            <div class="layui-input-prefix">
                                                <i class="iconfont  use-search"></i>
                                            </div>
                                            <input style="" type="text" name="A" value="" placeholder="Search..."
                                                class="layui-input" lay-affix="clear">
                                        </div>
                                        <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit
                                            lay-filter="demo-table-search">
                                            <i class="iconfont  use-search"></i>搜索
                                        </button>

                                    </div>
                                    <div class="right">
                                        <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit
                                            lay-filter="demo-table-search">
                                            <i class="iconfont use-screen"></i> 筛选
                                        </button>
                                        <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit
                                            lay-filter="demo-table-search">
                                            <i class="iconfont use-sort"></i> 排序
                                        </button>
                                        <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit
                                            lay-filter="demo-table-search">
                                            <i class="iconfont use-see"></i> 看板
                                        </button>
                                        <div class="count">
                                            15 条工作任务
                                        </div>
                                    </div>
                                </div>
                            </form>
                            
                            
                            <!-- 分类信息 -->
                            <div class="class">
                                <div><span>进行中</span><i>8</i></div>
                                <div><span>未开始</span><i>8</i></div>
                                <div><span>已暂停</span><i>8</i></div>
                                <div><span>已完成</span><i>8</i></div>
                            </div>
                            <!-- 分割线 -->
                            <div class="divider"></div>

                            <div class="kanban layui-form">
                                <!-- 第一个是禁止勾选的状态 -->
                                <div class="cell disabled">
                                    <input type="checkbox" disabled name="AAA">
                                    <div class="user">
                                        <img class="avatar" src='../../static/images/Rectangle 43.png'/>
                                        <span>路人甲</span>
                                    </div>
                                    <div class="text">任务标题文字，点击查看详情</div>
                                    <div class="info">
                                        <span>我的企业</span>
                                        <span class="table-tag red">最高</span>
                                    </div>
                                    <div class="info">
                                        <span><i class="layui-icon layui-icon-time"></i> 2020年12月01日 截止</span>
                                        <span class="table-tag blue">我为执行人</span>
                                    </div>
                                </div>
                                <div class="cell">
                                    <input type="checkbox" name="AAA">
                                    <div class="user">
                                        <img class="avatar" src='../../static/images/Rectangle 43.png'/>
                                        <span>路人甲</span>
                                    </div>
                                    <div class="text">任务标题文字，点击查看详情</div>
                                    <div class="info">
                                        <span>我的企业</span>
                                        <span class="table-tag red">最高</span>
                                    </div>
                                    <div class="info">
                                        <span><i class="layui-icon layui-icon-time"></i> 2020年12月01日 截止</span>
                                        <span class="table-tag blue">我为执行人</span>
                                    </div>
                                </div>
                                <div class="cell">
                                    <input type="checkbox" name="AAA">
                                    <div class="user">
                                        <img class="avatar" src='../../static/images/Rectangle 43.png'/>
                                        <span>路人甲</span>
                                    </div>
                                    <div class="text">任务标题文字，点击查看详情</div>
                                    <div class="info">
                                        <span>我的企业</span>
                                        <span class="table-tag red">最高</span>
                                    </div>
                                    <div class="info">
                                        <span><i class="layui-icon layui-icon-time"></i> 2020年12月01日 截止</span>
                                        <span class="table-tag blue">我为执行人</span>
                                    </div>
                                </div>
                                <div class="cell">
                                    <input type="checkbox" name="AAA">
                                    <div class="user">
                                        <img class="avatar" src='../../static/images/Rectangle 43.png'/>
                                        <span>路人甲</span>
                                    </div>
                                    <div class="text">任务标题文字，点击查看详情</div>
                                    <div class="info">
                                        <span>我的企业</span>
                                        <span class="table-tag red">最高</span>
                                    </div>
                                    <div class="info">
                                        <span><i class="layui-icon layui-icon-time"></i> 2020年12月01日 截止</span>
                                        <span class="table-tag blue">我为执行人</span>
                                    </div>
                                </div>
                                <div class="cell">
                                    <input type="checkbox" name="AAA">
                                    <div class="user">
                                        <img class="avatar" src='../../static/images/Rectangle 43.png'/>
                                        <span>路人甲</span>
                                    </div>
                                    <div class="text">任务标题文字，点击查看详情</div>
                                    <div class="info">
                                        <span>我的企业</span>
                                        <span class="table-tag red">最高</span>
                                    </div>
                                    <div class="info">
                                        <span><i class="layui-icon layui-icon-time"></i> 2020年12月01日 截止</span>
                                        <span class="table-tag blue">我为执行人</span>
                                    </div>
                                </div>
                                <div class="cell">
                                    <input type="checkbox" name="AAA">
                                    <div class="user">
                                        <img class="avatar" src='../../static/images/Rectangle 43.png'/>
                                        <span>路人甲</span>
                                    </div>
                                    <div class="text">任务标题文字，点击查看详情</div>
                                    <div class="info">
                                        <span>我的企业</span>
                                        <span class="table-tag red">最高</span>
                                    </div>
                                    <div class="info">
                                        <span><i class="layui-icon layui-icon-time"></i> 2020年12月01日 截止</span>
                                        <span class="table-tag blue">我为执行人</span>
                                    </div>
                                </div>
                                <div class="cell">
                                    <input type="checkbox" name="AAA">
                                    <div class="user">
                                        <img class="avatar" src='../../static/images/Rectangle 43.png'/>
                                        <span>路人甲</span>
                                    </div>
                                    <div class="text">任务标题文字，点击查看详情</div>
                                    <div class="info">
                                        <span>我的企业</span>
                                        <span class="table-tag red">最高</span>
                                    </div>
                                    <div class="info">
                                        <span><i class="layui-icon layui-icon-time"></i> 2020年12月01日 截止</span>
                                        <span class="table-tag blue">我为执行人</span>
                                    </div>
                                </div>
                                <div class="cell">
                                    <input type="checkbox" name="AAA">
                                    <div class="user">
                                        <img class="avatar" src='../../static/images/Rectangle 43.png'/>
                                        <span>路人甲</span>
                                    </div>
                                    <div class="text">任务标题文字，点击查看详情</div>
                                    <div class="info">
                                        <span>我的企业</span>
                                        <span class="table-tag red">最高</span>
                                    </div>
                                    <div class="info">
                                        <span><i class="layui-icon layui-icon-time"></i> 2020年12月01日 截止</span>
                                        <span class="table-tag blue">我为执行人</span>
                                    </div>
                                </div>
                                <div class="cell">
                                    <input type="checkbox" name="AAA">
                                    <div class="user">
                                        <img class="avatar" src='../../static/images/Rectangle 43.png'/>
                                        <span>路人甲</span>
                                    </div>
                                    <div class="text">任务标题文字，点击查看详情</div>
                                    <div class="info">
                                        <span>我的企业</span>
                                        <span class="table-tag red">最高</span>
                                    </div>
                                    <div class="info">
                                        <span><i class="layui-icon layui-icon-time"></i> 2020年12月01日 截止</span>
                                        <span class="table-tag blue">我为执行人</span>
                                    </div>
                                </div>
                                <div class="cell">
                                    <input type="checkbox" name="AAA">
                                    <div class="user">
                                        <img class="avatar" src='../../static/images/Rectangle 43.png'/>
                                        <span>路人甲</span>
                                    </div>
                                    <div class="text">任务标题文字，点击查看详情</div>
                                    <div class="info">
                                        <span>我的企业</span>
                                        <span class="table-tag red">最高</span>
                                    </div>
                                    <div class="info">
                                        <span><i class="layui-icon layui-icon-time"></i> 2020年12月01日 截止</span>
                                        <span class="table-tag blue">我为执行人</span>
                                    </div>
                                </div>
                            </div>
                            <div class="page-layout">
                                <div id="laypage-1"></div>
                            </div>
                        </div>
                        <div class="layui-tab-item">内容-2</div>
                    </div>
                </div>
            </div>
        </div>
    </use-body>
</body>
<script>
    layui.use('table', function(){
  var table = layui.table;
  var laypage = layui.laypage;
  
  // 已知数据渲染
  var inst = table.render({
    elem: '#ID-table-demo-data',
    cols: [[ //标题栏
      {field: 'id', title: '任务编号',align:'center'},
      {field: 'username', title: '任务标题',align:'center'},
      {field: 'id', title: '状态',align:'center'},
      {field: 'username', title: '优先等级',align:'center', templet: '<div><div class="table-tag">最高</div></div>'},
      {field: 'username', title: '任务发起人',align:'center', templet: `<div>
        <img class="table-avatar" src='../../static/images/Rectangle 43.png'/>
        <span style="margin-left: 7px;">路人甲</span>
        </div>`},
      {field: 'username', title: '任务来源',align:'center'},
      {field: 'username', title: '开始时间',align:'center'},
      {field: 'username', title: '截止时间',align:'center'},
      {field: 'username', title: '父/子任务量',align:'center'},
      {field: 'username', title: '我的角色',align:'center'}
    ]],
    data: [{ // 赋值已知数据
      "id": "10001",
      "username": "张三1",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "116"
    }, {
      "id": "10002",
      "username": "张三2",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "12",
      "LAY_CHECKED": true
    }, {
      "id": "10003",
      "username": "张三3",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "65"
    }, {
      "id": "10004",
      "username": "张三4",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "777"
    }, {
      "id": "10005",
      "username": "张三5",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "86"
    }, {
      "id": "10006",
      "username": "张三6",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "12"
    }, {
      "id": "10007",
      "username": "张三7",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "16"
    }, {
      "id": "10008",
      "username": "张三8",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "106"
    }],
    skin: 'nob', // 表格风格
    //even: true,
    maxHeight: 'full-450',
    page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
      layout: [ 'count', 'prev', 'page', 'next','limit',], //自定义分页布局
    },
    
    limit: 10 // 每页默认显示的数量
  });


 
      // 普通用法
      laypage.render({
        elem: 'laypage-1',
        layout: ['count', 'prev', 'page', 'next', 'limit'],
        theme: '#01A2E4',
        count: 50 // 数据总数
      });
});
</script>

</html>